<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script>
        fnResize();
        var k = null;
        window.addEventListener("resize",function(){clearTimeout(k);k = setTimeout(fnResize,300);},false);
        function fnResize(){
        var w = document.documentElement.clientWidth;
        // if(w >= 750){
        //     w = 750;
        //     document.getElementsByTagName('html')[0].style.width = '750px';
        //     document.getElementsByTagName('html')[0].style.margin = '0 auto';
        // }else{
        //
        // }
        document.getElementsByTagName('html')[0].style.width = 'auto';
        document.getElementsByTagName('html')[0].style.fontSize = w / 15 + 'px';
        }
    </script>
    <style>
        body{
            font-family: -apple-system,Helvetica,sans-serif;
            font-size: 12px;
            color: #444;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <!-- <svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
    <g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
        <path class="domain" stroke="#000" d="M0.5,6V0.5H880.5V6"></path>
        <g class="tick" opacity="1" transform="translate(0.5,0)">
            <line stroke="#000" y2="6"></line>
            <text fill="#000" y="9" dy="0.71em">0.0</text>
        </g>
        <g class="tick" opacity="1" transform="translate(176.5,0)">
            <line stroke="#000" y2="6"></line>
            <text fill="#000" y="9" dy="0.71em">0.2</text>
        </g>
        <g class="tick" opacity="1" transform="translate(352.5,0)">
            <line stroke="#000" y2="6"></line>
            <text fill="#000" y="9" dy="0.71em">0.4</text>
        </g>
        <g class="tick" opacity="1" transform="translate(528.5,0)">
            <line stroke="#000" y2="6"></line>
            <text fill="#000" y="9" dy="0.71em">0.6</text>
        </g>
        <g class="tick" opacity="1" transform="translate(704.5,0)">
            <line stroke="#000" y2="6"></line>
            <text fill="#000" y="9" dy="0.71em">0.8</text>
        </g>
        <g class="tick" opacity="1" transform="translate(880.5,0)">
            <line stroke="#000" y2="6"></line>
            <text fill="#000" y="9" dy="0.71em">1.0</text>
        </g>
    </g>
</svg> -->

    <!-- <div class="box"><h3>box1</h3></div>
    <div class="box"><h3>box2</h3></div>
    <div class="box"><h3>box3</h3></div> -->
    <div id="demo">

    </div>
</body>
<script src="dist/bundle.js"></script>
</html>
<style>
    #demo{border:1px solid #ccc;position: absolute;left:0;top:10rem;width:calc( 100% - 2px );height:calc( 100% - 10rem);}
    .update{color:red;font-size:16px;}
    #demo div{height:30px;background:#ccc;margin:10px 5px;width:0;color:#fff;line-height:30px;text-align: right;padding-right:1em;}
</style>
